<Note>You can check out this repo: https://github.com/BoundaryML/baml-examples/tree/main/nextjs-starter</Note>

To set up BAML with Typescript do the following:

<Steps>
  ### Install BAML VSCode/Cursor Extension
      https://marketplace.visualstudio.com/items?itemName=boundary.baml-extension

      - syntax highlighting
      - testing playground
      - prompt previews

  ### Install BAML
      <Tabs>
        <Tab title="npm" language="npm">
          ```bash npm
          npm install @boundaryml/baml
          ```
        </Tab>

        <Tab title="pnpm" language="pnpm">
          ```bash pnpm
          pnpm add @boundaryml/baml
          ```
        </Tab>

        <Tab title="yarn" language="yarn">
          ```bash yarn
          yarn add @boundaryml/baml
          ```
        </Tab>

        <Tab title="bun" language="bun">
          ```bash bun
          bun add @boundaryml/baml
          ```
        </Tab>

        <Tab title="deno" language="deno">
          ```bash deno
          deno install npm:@boundaryml/baml
          ```
        </Tab>
      </Tabs>

  ### Add BAML to your existing project
      This will give you some starter BAML code in a `baml_src` directory.

      <Tabs>
        <Tab title="npm" language="npm">
          ```bash npm
          npx baml-cli init
          ```
        </Tab>

        <Tab title="pnpm" language="pnpm">
          ```bash pnpm
          pnpm exec baml-cli init
          ```
        </Tab>

        <Tab title="yarn" language="yarn">
          ```bash yarn
          yarn baml-cli init
          ```
        </Tab>

        <Tab title="bun" language="bun">
          ```bash bun
          bun baml-cli init
          ```
        </Tab>

        <Tab title="deno" language="deno">
          ```bash deno
          deno run -A npm:@boundaryml/baml/baml-cli init
          ```
        </Tab>
      </Tabs>

  ### Generate the `baml_client` typescript package from `.baml` files

    One of the files in your `baml_src` directory will have a [generator block](/ref/baml/generator). This tells BAML how to generate the `baml_client` directory, which will have auto-generated typescript code to call your BAML functions.

    <Tabs>
      <Tab title="npm" language="npm">
        ```bash npm
        npx baml-cli generate
        ```
      </Tab>

      <Tab title="pnpm" language="pnpm">
        ```bash pnpm
        pnpm exec baml-cli generate
        ```
      </Tab>

      <Tab title="yarn" language="yarn">
        ```bash yarn
        yarn baml-cli generate
        ```
      </Tab>

      <Tab title="bun" language="bun">
        ```bash bun
        bun baml-cli generate
        ```
      </Tab>

      <Tab title="deno" language="deno">
        ```bash deno
        deno run -A npm:@boundaryml/baml/baml-cli generate
        # You may need to use the --unstable-sloppy-imports flag if you get an error about ESM
        # https://github.com/BoundaryML/baml/issues/1213#issuecomment-2526200783
        ```
      </Tab>
    </Tabs>

    <Note>
      If you need baml_client to be 'ESM' compatible, you can add the following `generator` configuration to your `.baml` file:

      ```baml
      generator typescript {
        ...
        module_format "esm" // the default is "cjs" for CommonJS
      }
      ```
    </Note>

    You can modify your `package.json` so you have a helper prefix in front of your build command.

    ```json package.json
    {
      "scripts": {
        // Add a new command
        "baml-generate": "baml-cli generate",
        // Always call baml-generate on every build.
        "build": "npm run baml-generate && tsc --build",
      }
    }
    ```

    See [What is baml_src](/guide/introduction/baml_src) to learn more about how this works.
    <img src="/assets/languages/baml-to-ts.png" />


    <Tip>
      If you set up the [VSCode extension](https://marketplace.visualstudio.com/items?itemName=Boundary.baml-extension), it will automatically run `baml-cli generate` on saving a BAML file.
    </Tip>

  ### Use a BAML function in Typescript!
    <Error>If `baml_client` doesn't exist, make sure to run the previous step! </Error>

    <Tabs>
    <Tab title="Async" language="typescript">
    ```typescript index.ts
    import { b } from "./baml_client"
    import type { Resume } from "./baml_client/types"

    async function Example(raw_resume: string): Promise<Resume> {
      // BAML's internal parser guarantees ExtractResume
      // to be always return a Resume type
      const response = await b.ExtractResume(raw_resume);
      return response;
    }

    async function ExampleStream(raw_resume: string): Promise<Resume> {
      const stream = b.stream.ExtractResume(raw_resume);
      for await (const msg of stream) {
        console.log(msg) // This will be a Partial<Resume> type
      }

      // This is guaranteed to be a Resume type.
      return await stream.getFinalResponse();
    }
    ```
    </Tab>

    <Tab title="Sync" language="typescript">
    ```typescript sync_example.ts
    import { b } from "./baml_client/sync_client"
    import type { Resume } from "./baml_client/types"

    function Example(raw_resume: string): Resume {
      // BAML's internal parser guarantees ExtractResume
      // to be always return a Resume type
      const response = b.ExtractResume(raw_resume);
      return response;
    }

    // Streaming is not available in the sync_client.
    ```
    </Tab>
    </Tabs>
</Steps>
